<template>
  <div>
    <!-- gutter：col的距离 -->
    <el-row :gutter="10">
      <el-col :span="6">
        <el-card>
          <Detail :title="'总销售额'" :number="list.salesTotal">
            <template slot="charts">
              <span>月同比&nbsp;&nbsp;{{list.salesGrowthLastMonth}}% &nbsp; &nbsp;<svg t="1664360658143" class="icon" viewBox="0 0 1026 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2947" width="16" height="16">
                  <path d="M420.864 448.512l-164.864 140.288 0-187.392 185.344-162.816 7.168 8.192 164.864 193.536 197.632-205.824-106.496-105.472 317.44-2.048 0 315.392-107.52-105.472-313.344 326.656-3.072-7.168zM928.768 703.488q19.456 0 37.376 7.68t30.72 20.48 20.48 30.72 7.68 37.376q0 20.48-7.68 37.888t-20.48 30.208-30.72 20.48-37.376 7.68l-832.512 0q-20.48 0-37.888-7.68t-30.208-20.48-20.48-30.208-7.68-37.888l0-641.024q0-19.456 7.68-36.864t20.48-30.208 30.208-20.48 37.888-7.68q19.456 0 37.376 7.68t30.72 20.48 20.48 30.208 7.68 36.864l0 481.28 4.096 0-4.096 3.072 0 60.416 736.256 0z" p-id="2948" fill="#1afa29"></path>
                </svg></span>
              &nbsp;
              <span>日同比&nbsp;{{list.salesGrowthLastDay}}% &nbsp; &nbsp;<svg t="1664360866681" class="icon" viewBox="0 0 1026 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2644" width="16" height="16">
                  <path d="M256 366.592l0-187.392 164.864 139.264 179.2-209.92 1.024-3.072 1.024 1.024 1.024-1.024 9.216 11.264 308.224 308.224 101.376-100.352 0 316.416-317.44-3.072 111.616-109.568-201.728-202.752-165.888 194.56-7.168 9.216 0-1.024zM928.768 704.512q19.456 0 37.376 7.68t30.72 20.48 20.48 30.72 7.68 37.376q0 20.48-7.68 37.888t-20.48 30.208-30.72 20.48-37.376 7.68l-832.512 0q-20.48 0-37.888-7.68t-30.208-20.48-20.48-30.208-7.68-37.888l0-641.024q0-19.456 7.68-36.864t20.48-30.208 30.208-20.48 37.888-7.68q19.456 0 36.864 7.168t30.208 19.968 20.992 29.696 8.192 36.352l0 546.816 736.256 0z" p-id="2645" fill="#d81e06"></path>
                </svg></span>
            </template>
            <template slot="footer">
              <span>日销售额：{{list.salesToday}}</span>
            </template>
          </Detail>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <Detail :title="'访问量'" :number="list.visitTotal">
            <template slot="charts">
              <LineCharts>

              </LineCharts>
            </template>
            <template slot="footer">
              <span>日访问量：{{list.visitToday}}</span>
            </template>
          </Detail>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <Detail :title="'支付笔数'" :number="list.payTotal">
            <template slot="charts">
              <BarCharts></BarCharts>
            </template>
            <template slot="footer">
              <span>转化率：{{list.payRate}}%</span>
            </template>
          </Detail>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <Detail :title="'运营活动效果'" :number="list.activityRate">
            <template slot="charts">
              <ProgressCharts></ProgressCharts>
            </template>
            <template slot="footer">
              <span>月同比&nbsp;&nbsp;{{list.activityGrowthLastMonth}}% &nbsp;&nbsp;<svg t="1664360658143" class="icon" viewBox="0 0 1026 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2947" width="16" height="16">
                  <path d="M420.864 448.512l-164.864 140.288 0-187.392 185.344-162.816 7.168 8.192 164.864 193.536 197.632-205.824-106.496-105.472 317.44-2.048 0 315.392-107.52-105.472-313.344 326.656-3.072-7.168zM928.768 703.488q19.456 0 37.376 7.68t30.72 20.48 20.48 30.72 7.68 37.376q0 20.48-7.68 37.888t-20.48 30.208-30.72 20.48-37.376 7.68l-832.512 0q-20.48 0-37.888-7.68t-30.208-20.48-20.48-30.208-7.68-37.888l0-641.024q0-19.456 7.68-36.864t20.48-30.208 30.208-20.48 37.888-7.68q19.456 0 37.376 7.68t30.72 20.48 20.48 30.208 7.68 36.864l0 481.28 4.096 0-4.096 3.072 0 60.416 736.256 0z" p-id="2948" fill="#1afa29"></path>
                </svg></span>
              &nbsp;
              &nbsp;
              <span>日同比&nbsp;{{list.activityGrowthLastDay}}% &nbsp;&nbsp;<svg t="1664360866681" class="icon" viewBox="0 0 1026 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2644" width="16" height="16">
                  <path d="M256 366.592l0-187.392 164.864 139.264 179.2-209.92 1.024-3.072 1.024 1.024 1.024-1.024 9.216 11.264 308.224 308.224 101.376-100.352 0 316.416-317.44-3.072 111.616-109.568-201.728-202.752-165.888 194.56-7.168 9.216 0-1.024zM928.768 704.512q19.456 0 37.376 7.68t30.72 20.48 20.48 30.72 7.68 37.376q0 20.48-7.68 37.888t-20.48 30.208-30.72 20.48-37.376 7.68l-832.512 0q-20.48 0-37.888-7.68t-30.208-20.48-20.48-30.208-7.68-37.888l0-641.024q0-19.456 7.68-36.864t20.48-30.208 30.208-20.48 37.888-7.68q19.456 0 36.864 7.168t30.208 19.968 20.992 29.696 8.192 36.352l0 546.816 736.256 0z" p-id="2645" fill="#d81e06"></path>
                </svg></span>
            </template>
          </Detail>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Detail from './Detail'
import LineCharts from './LineCard'
import BarCharts from './BarCharts'
import ProgressCharts from './ProgressCharts'
import { mapState } from 'vuex'
export default {
  data() {
    return {
      property: 'value'
    }
  },
  components: {
    Detail,
    LineCharts,
    BarCharts,
    ProgressCharts
  },
  computed: {
    ...mapState('home', ['list'])
  }
}
</script>

<style>
</style>